<template>
  <div>
      <div v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)"
           style="overflow: hidden;padding:20px">
        <img :src="data.poster"  style="float: left; width: 140px"/>
        <h3>影名：<span style="font-size: 15px">{{data.name}}</span></h3>
        <h3>观众评分：{{data.grade}}</h3>
        <p v-if="data.actors">主演:{{data.actors | actorfilter}}</p>
        <p v-else>暂无主演</p>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import Detail from "../Detail";
import Vue from "vue";
Vue.filter("actorfilter",function (data){
  //过滤器
  //map映射把原始数据映射出来，
  var newlist = data.map(item=>item.name)
  return newlist.join(' ')
})
export default {
  name: 'ddp',
  data(){
    return{
      datalist:[]
    }
  },
  components:{
    Detail
  },

  mounted() {
    axios({
      url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=5909244",
      headers:{
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16200862756251397913772033","bc":"110100"}',
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res=>{
      console.log(res.data);
      this.datalist = res.data.data.films;
    })
  },
  methods:{
    handleChangePage(id){
      // console.log("获取id",id)
      //kerwindetail
      //kerwindetail
      this.$router.push({name:'Detail', params:{id:id}})
    }
  }
}
</script>

<style scoped>
h3{
  margin: 20px 0;
}
</style>
